<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title> 小程序管理系统</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="format-detection" content="telephone=no">
  
  <link rel="stylesheet" href="__PUBLIC__/layui/css/layui.css"  media="all">
  <style type="text/css">
  .layui-table{
    text-align: center;
  }
  .layui-table td, .layui-table th{
    text-align: center;
  }
  </style>
</head>
<body>
<div class="layui-layout layui-layout-admin">

  <div class="layui-body">
    <!-- 内容主体区域 -->
      <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>余额明细</legend>
      </fieldset>
      <div id="view"></div>
      <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>押金明细</legend>
      </fieldset>
      <input type="hidden" name="uid" value="{$uid}" id="uid">
      <div id="view1"></div>
  </div>
</div>

<script id="balance_tpl" type="text/html">

  <table class="layui-table">
    <thead>
    <tr>
      <th>ID</th>
      
      <th>金额</th>
      <th>添加时间</th>
    </tr>
    </thead>
    <tbody>
    {{#  layui.each(d, function(index, item){ }}
    <tr>
      <td>{{ item.uid }}</td>
      <td>{{item.amount}}</td>
      <td>{{item.addtime}}</td>
    </tr>
    {{#  }); }}
    </tbody>
  </table>
  <div id="page-box"></div>
</script>

<script id="yanjin_tpl" type="text/html">

  <table class="layui-table">
    <thead>
    <tr>
      <th>ID</th>
      <th>金额</th>
      <th>添加时间</th>
    </tr>
    </thead>
    <tbody>
    {{#  layui.each(d, function(index, item){ }}
    <tr>
      <td>{{ item.uid }}</td>
      <td>{{item.amount}}</td>
      <td>{{item.addtime}}</td>
    </tr>
    {{#  }); }}
    </tbody>
  </table>
  <div id="page-box1"></div>
</script>



<script src="__PUBLIC__/layui/layui.js" charset="utf-8"></script>
<script src="__PUBLIC__/js/jquery-1.11.1.min.js" charset="utf-8"></script>
<script>
//JavaScript代码区域
layui.use(['element','laypage','laytpl','layer'], function(){
    var element = layui.element
        ,$ = layui.jquery
        ,layer = layui.layer
        ,laytpl = layui.laytpl
        ,laypage = layui.laypage;
    var uid =  $("#uid").val();
    
    getBalance(1, 10);
    function getBalance(page_balance, limit_balance){
        $.get("{:U('mingxi')}?page_balance="+page_balance+"&limit_balance="+limit_balance+"&uid="+uid,function(data){
            console.log(data);
            var view = document.getElementById('view1');
            var getTpl = balance_tpl.innerHTML;
            laytpl(getTpl).render(data.balance, function(html){
                view.innerHTML = html;
            });
            laypage.render({
                elem: 'page-box'
                ,count: data.balance_count
                ,limit_balance:limit_balance
                ,curr: page_balance
                ,layout: ['count', 'prev', 'page_balance', 'next', 'limit_balance', 'skip']
                ,jump: function(obj, first){
                    console.log(obj)
                    if(!first){
                        getBalance(obj.curr, obj.limit_balance);
                    }
                }
            });
        })
    }

    getYajin(1, 10);
    function getYajin(page_yajin, limit_yajin){
        $.get("{:U('mingxi')}?page_yajin="+page_yajin+"&limit_yajin="+limit_yajin+"&uid="+uid,function(data){
          console.log(data.yajin_count);
            var view = document.getElementById('view');
            var getTpl = yajin_tpl.innerHTML;
            laytpl(getTpl).render(data.yajin, function(html){
                view.innerHTML = html;
            });
            laypage.render({
                elem: 'page-box1'
                ,count: data.yajin_count
                ,limit:limit_yajin
                ,curr: page
                ,layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
                ,jump: function(obj, first){
                    console.log(obj)
                    if(!first){
                        getYajin(obj.curr, obj.limit);
                    }
                }
            });

           
        })
    }

});
</script>
</body>
</html>
